<template>
  <div class="filter-section">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-select
          v-model="selectedCourseType"
          placeholder="课程类型"
          clearable
          @change="handleFilterChange"
        >
          <el-option
            v-for="type in courseTypes"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="selectedStatus"
          placeholder="上课状态"
          clearable
          @change="handleFilterChange"
        >
          <el-option
            v-for="status in statusOptions"
            :key="status.value"
            :label="status.label"
            :value="status.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleFilterChange"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索课程名称"
          clearable
          @clear="handleFilterChange"
          @keyup.enter.native="handleFilterChange"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleFilterChange"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HistoryFilter',
  props: {
    courseTypes: {
      type: Array,
      required: true
    },
    statusOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedCourseType: '',
      selectedStatus: '',
      dateRange: [],
      searchKeyword: ''
    };
  },
  methods: {
    handleFilterChange() {
      this.$emit('filter-change', {
        selectedCourseType: this.selectedCourseType,
        selectedStatus: this.selectedStatus,
        dateRange: this.dateRange,
        searchKeyword: this.searchKeyword
      });
    }
  }
};
</script>

<style scoped>
.filter-section {
  margin-bottom: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-row {
    flex-direction: column;
  }

  .el-col {
    width: 100% !important;
    margin-bottom: 10px;
  }
}
</style>
